<template>
  <div class="space-y-4">
    <div class="flex items-center gap-3">
      <div v-for="(s,idx) in steps" :key="s" class="flex items-center gap-2">
        <div :class="['w-8 h-8 rounded-full flex items-center justify-center', idx===active ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700']">{{ idx+1 }}</div>
        <div class="hidden sm:block">{{ s }}</div>
        <div v-if="idx<steps.length-1" class="w-6 h-px bg-gray-300"></div>
      </div>
    </div>

    <div v-if="active===0">
      <h3 class="font-medium">策略基础</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <input v-model="form.name" placeholder="策略名称" class="border p-2 rounded" />
        <select v-model="form.asset" class="border p-2 rounded">
          <option v-for="a in assets" :key="a" :value="a">{{a}}</option>
        </select>
      </div>
    </div>

    <div v-if="active===1">
      <h3 class="font-medium">参数设置</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <input v-model.number="form.leverage" type="number" placeholder="杠杆 (e.g. 1)" class="border p-2 rounded" />
        <input v-model.number="form.size" type="number" placeholder="交易量" class="border p-2 rounded" />
      </div>
    </div>

    <div v-if="active===2">
      <h3 class="font-medium">确认 & 提交</h3>
      <pre class="bg-gray-100 p-3 rounded text-sm">{{ form }}</pre>
    </div>

    <div class="flex items-center gap-2">
      <button @click="prev" :disabled="active===0" class="px-3 py-1 border rounded">上一步</button>
      <button @click="next" class="px-3 py-1 bg-blue-600 text-white rounded">{{ active===steps.length-1 ? '提交' : '下一步' }}</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const steps = ['基础','参数','确认']
const active = ref(0)
const assets = ['BTC','ETH','SOL']

const form = ref({ name:'策略A', asset:'BTC', leverage:1, size:1 })

function next(){
  if(active.value < steps.length-1) active.value++
  else { alert('已提交: ' + JSON.stringify(form.value)) }
}
function prev(){ if(active.value>0) active.value-- }
</script>
